{{#each members}}
    <div class="roster-member-card roster-entry">
        <div class="roster-picture-card">
            <sakai-user-photo
                user-id="{{userId}}"
                label="{{tr 'profile_picture_alt'}} {{displayName}}"
                title="{{tr 'profile_picture_alt'}} {{displayName}}"
                classes="roster-photo"
                {{#if official}}
                official
                {{else}}
                    {{#unless canViewProfilePicture}}
                    blank
                    {{/unless}}
                {{/if}}
                {{#if ../printMode}}
                print
                {{/if}}
                profile-popup="on"
            >
            </sakai-user-photo>
        </div> <!-- /roster-picture-card -->

        <div class="roster-info-card">
            {{#unless ../hideNames}}
            <div class="roster-card-label">{{tr 'facet_name'}}</div>
            <div class="roster-card-value">
                {{#if ../../viewProfile}}
                <a href="javascript:;" class="profile" data-user-id="{{userId}}">
                {{/if}}
                {{{getName ../firstNameLastName}}}
                {{#if ../../viewProfile}}
                </a>
                {{/if}}
            </div>

            <div class="roster-card-label">{{tr 'facet_nickname'}}</div>
            {{#if nickname}}
                <div class="roster-card-value nickname">"{{{nickname}}}"</div>
            {{else}}
                <div class="roster-card-value nickname">{{{tr 'name_pronunciation_not_provided'}}}</div>
            {{/if}}

            {{#if ../viewProfile}}
                <div class="roster-card-label">{{tr 'facet_profile_link'}}</div>
                <div class="roster-card-value">
                    <button class="btn btn-sm"
                        type="button"
                        data-user-id="{{userId}}"
                        onclick="portal.displayProfile(event);"
                        title="{{tr 'profile_link_text'}} : {{tr 'profile_link_tooltip'}} {{displayName}}"
                        aria-label="{{tr 'profile_link_tooltip'}} {{displayName}}">
                      {{tr 'profile_link_text'}}
                    </button>
                </div>
            {{/if}}

            {{/unless}}

            {{#if ../viewPronouns}}
                {{#if pronouns}}
                <div class="roster-card-label">{{tr 'facet_pronouns'}}</div>
                <div class="roster-card-value pronouns">{{{pronouns}}}</div>
                {{/if}}
            {{/if}}

            {{#if ../viewUserNamePronunciation}}
            <div class="roster-card-label">{{tr 'facet_user_name_pronunciation'}}</div>
            <div class="roster-card-value namePronunciation">
                <span class="namePronunciation">
                {{#if hasPronunciationRecording}}
                    <sakai-pronunciation-player user-id="{{userId}}"></sakai-pronunciation-player>
                {{else}}
                    {{#ifCond ../currentUserId userId}}
                        {{#if ../profileNamePronunciationLink}}
                            <a href="{{../profileNamePronunciationLink}}">{{tr 'name_pronunciation_profile_link'}}</a>
                        {{else}}
                            {{{tr 'name_pronunciation_not_provided'}}}
                        {{/if}}
                    {{else}}
                        {{{tr 'name_pronunciation_not_provided'}}}
                    {{/ifCond}}
                {{/if}}
                </span>
            </div>
            {{/if}}

            {{#if ../viewUserDisplayId}}
            <div class="roster-card-label">{{tr 'facet_userId'}}</div>
            <div class="roster-card-value">
                {{#if ../../viewProfile}}
                <a href="javascript:;" class="profile" data-user-id="{{userId}}">
                {{/if}}
                {{displayId}}
                {{#if ../../viewProfile}}
                </a>
                {{/if}}
            </div>
            {{/if}}

            {{#if ../enrollmentsMode}}
                <div class="roster-card-label">{{tr 'facet_status'}}</div>
                <div class="roster-card-value roster-status">{{enrollmentStatusText}}</div>
                <div class="roster-card-label">{{tr 'facet_credits'}}</div>
                <div class="roster-card-value roster-credits">{{credits}}</div>
            {{else}}
                <div class="roster-cell-label">{{tr 'facet_role'}}</div>
                <div class="roster-card-value roster-role">{{role}}</div>
            {{/if}}

            {{#if ../showVisits}}
                {{#if ../viewSiteVisits}}
                <div class="roster-card-label">{{tr 'total_visits'}}</div>
                <div class="roster-card-value roster-total-visits">{{totalSiteVisits}}</div>
                    {{#if lastVisitTime}}
                    <div class="roster-card-label">{{tr 'last_visit'}}</div>
                    <div class="roster-card-value roster-last-visit">{{lastVisitTime}}</div>
                    {{/if}}
                {{/if}}
            {{/if}}

            {{#if ../viewGroup}}
            <div class="roster-card-label">{{tr 'facet_groups'}}</div>
            {{#if hasGroups}}
               <div class="roster-card-value roster-group-cell">
                       {{#if groups.[1]}}
                               <span class="skip">{{tr 'screenreader_comboBox'}}</span>
                               <select class="roster-groups-selector" id="roster-groups-{{userId}}" title="{{tr 'roster_user_groups_label'}}">
                                   <option value="all">{{tr 'member_group_all_option'}}</option>
                               {{#each groups}}
                               <option value="{{id}}">{{title}}</option>
                               {{/each}}
                               </select>
                       {{else}}
                               <a href="javascript:;" class="roster-group-link" data-groupid="{{groups.[0].id}}">{{groups.[0].title}}</a>
                       {{/if}}
              </div>
             {{else}}
                <div class="roster-card-value roster-no-groups-label">{{tr 'roster_group_ungrouped'}}</div>
             {{/if}}
            {{/if}}

            {{#if ../viewEmail}}
                {{#if email}}
                <div class="roster-card-label">{{tr 'facet_email'}}</div>
                <div class="roster-card-value">
                    <a href="mailto:{{email}}" title="{{tr 'profile_email'}} {{email}}">{{email}}</a>
                </div>
                {{/if}}
            {{/if}}

            {{#if ../viewUserProperty}}
                {{#if hasProperties}}
                <div class="roster-card-label">{{tr 'facet_userProperties'}}</div>
                <div class="roster-card-value">
                    <ul class="roster-user-properties">
                        {{#each userProperties}}
                        <li>{{@key}}: {{this}}</li>
                        {{/each}}
                    </ul>
                </div>
                {{/if}}
            {{/if}}

            {{#if ../viewCandidateDetails}}
                {{#if studentNumber}}
                <div class="roster-card-label">{{tr 'facet_studentNumber'}}</div>
                <div class="roster-card-value">{{studentNumber}}</div>
                {{/if}}
                {{#if hasAdditionalInfo}}
                    {{#if ../printMode}}
                        {{#if hasSpecialNeeds}}
                        <div class="roster-card-label-row">{{tr 'facet_specialNeeds'}}</div>
                        <div class="roster-card-value-row">
                            <ul class="roster-special-needs">
                                {{#each specialNeeds}}
                                <li>{{this}}</li>
                                {{/each}}
                            </ul>
                        </div>
                        {{/if}}
                        {{#if hasAdditionalNotes}}
                        <div class="roster-card-label-row">{{tr 'facet_additionalNotes'}}</div>
                        <div class="roster-card-value-row">
                            <ul class="roster-additional-notes">
                                {{#each additionalNotes}}
                                <li>{{this}}</li>
                                {{/each}}
                            </ul>
                        </div>
                        {{/if}}
                    {{else}}
                    <div class="roster-card-label-row">
                        <button class="btn-link roster-card-button additional-info" data-user-id="{{userId}}">
                            <span class="roster-card-button-icon si si-info-circle"></span>
                            <span>{{tr 'additionalInfo_button_text'}}</span>
                        </button>
                    </div>
                    {{/if}}
                {{/if}}
            {{/if}}
        </div> <!-- /roster-info-card -->
    </div> <!-- /roster-member-card -->
{{/each}}
